<template>
  <div>
    <div class="poster_" ref="poster" id="poster"  :style="{background:$store.state.mainColor}" @click="toImage"> 
      <div class="poster_con" :style="{'background-image':'url('+posterData.bacImg+')'}">
          <div class="header_img">
              <div class="img" :style="{'background-image':'url('+posterData.swiperImg+')'}" alt=""></div>
              <div class="text_name" :style="{background:$store.state.mainColor}">{{ '-  '+ posterData.swiperName +' -' }}</div>
          </div>
          <div class="info">
              <div class="flex_v">
                <div class="avatr">
                  <img :src="posterData.icon" alt="">
                </div>
                <div class="detail">
                  <div>{{ '姓名：'+ posterData.name }}</div>
                  <div>{{ '生成时间：'+ this.posterData.timeStr }}</div>
                </div>
              </div>
              <div class="flex_v">
                <div class="my_word"  :style="{color:$store.state.mainColor}">{{ posterData.wordTips }}</div>
                <div class="desc">{{ posterData.word }}</div>
              </div>
          </div>
          <div class="qrcode_con">
            <div class="qrcode" :class="{'qrcode_new':isGetQrcode==true}">
              <img crossOrigin="anonymous" :src="qrcodeNewUrl" alt=""/>
            </div>
            <div class="join" :style="{background:$store.state.mainColor}">
                <div class="jion_text">{{ posterData.posterNumText }}</div>
                <div class="company" v-if="posterData.guide[0]&&posterData.guide[0]!=''">{{ posterData.guide[0] }}</div>
                <div class="company" v-if="posterData.guide[1]&&posterData.guide[1]!=''">{{ posterData.guide[1] }}</div>
            </div>
          </div>
      </div>
    </div>
    <qrcode v-if="isGetQrcode"  :text="qrcodeUrl" @getLink="setLink"></qrcode>

    <div class="img_poster">
      <img :src="imgUrl" alt=""/>
    </div>
    <div class="totast_save">可长按保存图片或转发好友</div>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import {strChange} from '@/until/tool'
  import qrcode from '@/components/yz-qr/yz-qr.vue'
	import html2canvas from "html2canvas";
  export default {
    name: "posterShow",
    components:{qrcode},
    data() {
      return {
        qrcodeUrl: '',//原地址二维码
        qrcodeNewUrl:'',
        data:'',
        isGetQrcode:false,
        
        imgUrl: '',
      }
    },
    computed:{
      ...mapState({
        qiniuUrl:state => state.qiniuUrl
      })
    },
    props:{
      posterData:{
        type:Object,
        default:{},
      },
      relayData:{
        type:Object,
        default: {}
      }
    },
    methods: {
      setLink(val){
				this.qrcodeNewUrl = val
				this.$nextTick(()=>{
					this.toImage()
				})
			},
      toImage () {
				let _this = this;
				let w = this.$refs.poster.offsetWidth - 1
				let h = this.$refs.poster.offsetHeight - 1
				html2canvas(document.getElementById("poster"), {
				  useCORS: true,
				  logging: false,
				  width: w,//设置canvas尺寸与所截图尺寸相同，防止白边
				  height: h,//防止白边
				}).then(function (canvas) {
				  _this.imgUrl = canvas.toDataURL("image/png"); // 获取海报的base64
				}).catch(function (res) {
				  console.log("catch", res)
				});
			            // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
			},
      startPostser(){
        let dataShare = Object.assign({},this.relayData)
        this.data = dataShare.settings
        if(!dataShare.settings.follow_account){
          this.qrcodeUrl =window.location.href
          this.isGetQrcode = true
        }else{
          this.qrcodeNewUrl = dataShare.qrcode 
          setTimeout(() => {
            this.toImage()
          })
        }

        let posterTitle = strChange(dataShare.settings.title,this.posterData.posterNum)
        dataShare.title = posterTitle
        this.$emit('setPosterShare',dataShare,false)
      }
    },
    mounted() {
      uni.showToast({
        title: '海报生成中···',
        icon: 'none',
        duration: 2000
      })
      this.startPostser()
    }
  }
</script>
<style scoped lang="scss">
.poster_{
  position: fixed;
		top: -20000rpx;
		left: 75rpx;
}
  .poster_con{
    position: relative;
    top: 0;
    left: 0rpx;
    width: 750rpx;
    height: 1448rpx;
    background-size: cover!important;
    background-position: center center!important;
    background-repeat: no-repeat!important;

    .header_img{
      position: absolute;
      top: 285rpx;
      left: 50rpx;
      width: 650rpx;
      height: 570rpx;
      border: 3rpx solid #FCF8D2;
      border-radius: 18rpx;
      overflow: hidden;
      .img{
        width: 650rpx;
        height: 450rpx;
        background-size: cover!important;
        background-position: center center!important;
        background-repeat: no-repeat!important;
      }
      .text_name{
        width: 650rpx;
        height: 120rpx;
        line-height: 120rpx;
        background: #B51511;
       
        text-align: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 40rpx;
        color: #FCF8D2;
      }
    }
    .info{
      position: absolute;
      left: 50rpx;
      top: 875rpx;
      width: 650rpx;
      height: 292rpx;
      background: #FCF8D2;
      box-shadow: 0rpx 6rpx 12rpx 1rpx rgba(0,0,0,0.16);
      border-radius: 18rpx;
      overflow: hidden;
      .flex_v{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        &:nth-child(1){
              margin-top: 24rpx;
              margin-left: 33rpx;
              height: 120rpx;
        }
        .avatr{
          line-height: 0;
          img{
            width: 120rpx;
            height: 120rpx;
            border-radius: 50%;
          }
        }
        .detail{
          margin-left: 24rpx;
          div{
            width: 382rpx;
            height: 48rpx;
            line-height: 48rpx;
            background: #F9D75D;
            border-radius: 40rpx;
            padding-left: 28rpx;
            &:nth-child(2){
              margin-top: 16rpx;
            }
          }
        }
        &:nth-child(2){
          margin-top: 33rpx;
        }
        .my_word{
          width: 90rpx;
          height: 82rpx;
          line-height: 41rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 30rpx;
          color: #BF0612;
          text-align: center;
          margin-left: 48rpx;
        }
        .desc{
          width: 397rpx;
          margin-left: 52rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 24rpx;
          line-height: 34rpx;
          max-height: 67rpx;
          color: #222222;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
    .qrcode_con{
      width: 650rpx;
      height: 140px;
      display: flex;
      justify-content: flex-start;
      position: absolute;
      left: 50rpx;
      top: 1187rpx;
      .qrcode{
        line-height: 0;
        border-radius: 10rpx ;
        img{
          width: 140rpx;
          height: 140rpx;
          border-radius: 10rpx ;
        }
      }
      .qrcode_new{
        width: 140rpx;
        height: 140rpx;
        line-height: 0;
        background: #ffffff;
        img{
          margin-top: 12rpx;
          margin-left: 12rpx;
          width: 120rpx;
          height: 120rpx;
        }
      }
      .join{
        margin-left: 10rpx;
        width: 500rpx;
        height: 140rpx;
        background: #BF0612;
        border-radius: 10rpx ;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        div{
          text-align: center;
        }
        .jion_text{
          height: 50rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          font-size: 36rpx;
          color: #FCF8D2;
          line-height: 50rpx;
        }
        .company{
          height: 34rpx;
          overflow: hidden;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 22rpx;
          color: #FFF387;
          line-height: 34rpx;
          margin-top: 4rpx;
        }
      }
    }
  }

  .img_poster{
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    line-height: 0;
    img{
      width: 100%;
      height: auto;
    }
  }
  .totast_save{
    position: absolute;
    width: 100%;
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    text-align: center;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    background: rgba(0,0,0,0.65);
    color: #ffffff;
  }
</style>